<template>
	<view class="main">
		<view class="header">
			<view class="in">
				<text>￥{{total}}</text>
				<text>总业绩</text>
			</view>
			<view class="in">
				<text>￥{{achievements}}</text>
				<text>小区业绩</text>
			</view>
		</view>
		<view class="list">
			<view class="tit">
				我的邀请（{{info.team_num}}人）
			</view>
			<view class="itemBox">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="info">
						<text>{{item.nickname}}</text>
						<text v-if="item.rank == 1">会员</text>
						<text v-if="item.rank == 0">普通用户</text>
					</view>
					<view class="num">
						<text>{{item.createtime}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myTeam,
		user
	} from '@/api/index.js'
	export default{
		data(){
			return{
				list:[],
				total:'',
				achievements:'',
				info:{}
			}
		},
		onLoad() {
			this.getList()
			this.getInfo()
		},
		methods:{
			async getInfo() {
				let res = await user()
				console.log(res.data.team_num)
				this.info = res.data
			},
			async getList(){
				let res = await myTeam({
					page_size:1000
				})
				console.log(res.data.team_num)
				this.list = res.data.lists.data
				this.total = res.data.total
				this.achievements = res.data.achievements
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f6f6f6;
		.header{
			padding: 100rpx 0 60rpx;
			display: flex;
			justify-content: space-around;
			background-color: #EA504F;
			.in{
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #fff;
				text:first-child{
					font-size: 44rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		.list{
			padding: 40rpx 30rpx;
			min-height: 100vh;
			height: fit-content;
			background-color: #fff;
			box-sizing: border-box;
			.tit{
				font-size: 32rpx;
				color: #000;
				margin-bottom: 40rpx;
			}
			.itemBox{
				.item{
					display: flex;
					align-items: center;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #000;
					margin-bottom: 30rpx;
					image{
						width: 100rpx;
						height: 100rpx;
						border-radius: 200rpx;
					}
					.info{
						flex: 1;
						margin: 0 30rpx;
						height: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						color: #000;
						text:first-child{
							font-size: 28rpx;
							font-weight: 700;
						}
						text:last-child{
							font-size: 24rpx;
						}
					}
					.num{
						height: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						color: #000;
						align-items: center;
						text:first-child{
							font-size: 28rpx;
							font-weight: 700;
						}
						text:last-child{
							color: #EA504F;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>